<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane :label="'User'" name="User">User</el-tab-pane>
    <el-tab-pane :label="'Config'" name="Config">Config</el-tab-pane>
    <el-tab-pane :label="'Role'" name="Role">Role</el-tab-pane>
    <el-tab-pane :label="'Task'" name="Task">Task</el-tab-pane>
  </el-tabs>

  <Edit style="width: 1em; height: 1em; margin-right: 8px" />
  <el-button icon="edit" @click="test">light </el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('User')

function test(){
  //后端默认亮色皮肤
  const $html = document.querySelector('html')
  console.log("class",$html.className)
  $html.className = $html.className == 'dark' ? 'light':'dark'
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(activeName.value,tab, event)
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>